<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page isELIgnored="false" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>/mobile/scan/scanMap.jsp</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

	<LINK href="${cPath }/css/bud.css"  rel="stylesheet"  type="text/css"/>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<SCRIPT type="text/javascript">
		// jQuery mobile 의 기본 속성인 ajax 해제
		$(document).on("mobileinit", function(){
			$.mobile.ajaxEnabled = false;
		});
	</SCRIPT>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" ></script>
	<script type="text/javascript">
// 		<c:if test="${!empty msg }">
// 			alert("${msg }");
// 		</c:if>
// 		$(document).on("pageshow", "#budMyProfile", function(){
// 			var msg = '${msg}';
// 			alert(msg);
// 		});
// 		function selectImage(){
// 			$("#selectImage").focus();
// 			alert("111");
// 		}
	
		window.addEventListener('load', function() {
			setTimeout(scrollTo, 0, 1);
			},
			false);
	
		var lat;
		var lag;
		$(document).on("pageshow", "#scanMap", function(){
			navigator.geolocation.getCurrentPosition(
				successCallback,
				errorCallback
			);
			function successCallback(position){
				// 구글맵 띄우기, 내위치 마커표시
				lat = position.coords.latitude;
				lng = position.coords.longitude;
				
				// ajax 로 리퀘스트 보내기
				$.get("${cPath}/scan/scanMapLocSet.mo", { lat:lat, lng:lng } );
				
				var map_div = document.getElementById("map_div");
				map_div.style.width = $(window).width()+"px";
				map_div.style.height = $(window).height()-$("[data-role='header']").height() +"px";
				var latlng = new google.maps.LatLng(lat, lng);
				var gmap = new google.maps.Map(
					map_div, 
					{zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP}		
				);
				
// 				alert("${range}");
				if ('${sessionScope.memberSession.mem_scaninfo}' == 's'){
					// 상점위치 마커 표시
					var shopListJson = '${JsonListShop}';
					shopListJson = eval(shopListJson);
					$.each(shopListJson, function(i, value) {
						var range = eval('${range}');
						if (range == null){
							range = 5;
						}
						if (range > calcDistance(lat, lng, value.sh_latitude, value.sh_longitude)) {
							var photo = "data:image/jpeg;base64,"+value.sh_photoStr;
		
							var latlngShop = new google.maps.LatLng(value.sh_latitude, value.sh_longitude);
							var imageShop = new google.maps.MarkerImage(photo,
									new google.maps.Size(50, 50),
									new google.maps.Point(0,0),
									new google.maps.Point(0, 32),
									new google.maps.Size(50, 50));
							var markerShop = new google.maps.Marker({
								position: latlngShop,
								map: gmap,
								icon: imageShop,
								title: value.sh_name
							});
							
							google.maps.event.addListener(markerShop, 'click', function() {
								location.href="${cPath}/scan/scanProfileShop.mo?sh_no="+value.sh_no;
							});
						}
					});
					$("#rad_shop").trigger("click");
					
				} else {
					// 친구위치 마커 표시
					// 사람들 위치 마커 표시
					var peopleListJson = eval('${JsonList}');

					$.each(peopleListJson, function(i, value) {
						var mem_no = '${sessionScope.memberSession.mem_no}';
						var range = eval('${range}');
						if (range == null){
							range = 5;
						}
						if ( mem_no != value.lo_ref_mem && range > calcDistance(lat, lng, value.lo_latitude, value.lo_longitude)
							&& ('${sessionScope.memberSession.mem_scaninfo}' == 'p' && value.lo_sec_topeople == 'y')
							|| ('${sessionScope.memberSession.mem_scaninfo}' == 'f' && value.lo_sec_tofriend == 'y')) {

							var photo = null; 
							if (value.lo_photo == null){
								photo = '${cPath}/css/webbud.png';
							} else {
								photo = "data:image/jpeg;base64,"+value.lo_photo;								
							}
							var latlngPeople = new google.maps.LatLng(value.lo_latitude, value.lo_longitude);
							var imagePeople = new google.maps.MarkerImage(photo,
									new google.maps.Size(50, 50),
									new google.maps.Point(0,0),
									new google.maps.Point(0, 32),
									new google.maps.Size(50, 50));
							var markerPeople = new google.maps.Marker({
								position: latlngPeople,
								map: gmap,
								icon: imagePeople,
								title: value.lo_ref_mem.toString()
							});
							google.maps.event.addListener(markerPeople, 'click', function() {
								if ('${sessionScope.memberSession.mem_scaninfo}' == 'p'){
									location.href="${cPath}/scan/scanProfilePeople.mo?mem_no="+value.lo_ref_mem;
								} else if ('${sessionScope.memberSession.mem_scaninfo}' == 'f'){
									location.href="${cPath}/bud/budProfile.mo?mem_no="+value.lo_ref_mem;
								}
							});
						}
					});
					if ('${sessionScope.memberSession.mem_scaninfo}' == 'p'){
						$("#rad_people").trigger("click");
					} else if ('${sessionScope.memberSession.mem_scaninfo}' == 'f'){
						$("#rad_friend").trigger("click");
					}
				}
				
				var marker = new google.maps.Marker({
					position: latlng,
					animation: google.maps.Animation.DROP,
					map: gmap
				});
				
			}
			
			function errorCallback(err){
				alert("위치정보를 가져오는데 실패했습니다");
				
				var map_div = document.getElementById("map_div");
				map_div.style.width = $(window).width()-$("[data-role='header']").height()+"px";
				map_div.style.height = $(window).height()+"px";
				var latlng = new google.maps.LatLng(37.521636, 126.92411);
				var gmap = new google.maps.Map(
					map_div, 
					{zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP}		
				);
			}
		});
		
		function calcDistance(lat1, lon1, lat2, lon2){
            var EARTH_R, Rad, radLat1, radLat2, radDist; 
            var distance, ret;

            EARTH_R = 6371000.0;
            Rad = Math.PI/180;
            radLat1 = Rad * lat1;
            radLat2 = Rad * lat2;
            radDist = Rad * (lon1 - lon2);
           
            distance = Math.sin(radLat1) * Math.sin(radLat2);
            distance = distance + Math.cos(radLat1) * Math.cos(radLat2) * Math.cos(radDist);
            ret = EARTH_R * Math.acos(distance);
            var rtn = Math.round(Math.round(ret) / 1000);
        
            return rtn;
        }
		
		function moveScanList(){
			location.href = "${cPath }/scan/scanList.mo?lat="+lat+"&lng="+lng+"&range=" + $("#range").val();
		}
		
	</script>

</head>
<body>
<div id="scanMap" data-role="page" data-theme="b">
	
	<div data-role="header" data-position="fixed" data-theme="a">
		<div style="left:5px; top:5px; z-index:10001;position:fixed;" >
			<img src="${cPath }/css/webbud.png" height="30px" />
		</div>
		<a href="${cPath }/logout.mo" id="back" data-icon="custom" class="ui-btn-right">로그아웃</a>
		<h1>스캔</h1>
		<div data-role="navbar" data-iconpos="top" >
			<ul>
				<li><a href="#" id="scan" data-icon="custom" class="ui-btn-active">Scan</a></li>
				<li><a href="${cPath }/bud/budList.mo" id="bud" data-icon="custom" >Bud</a></li>
				<li><a href="${cPath }/chat/chatList.mo" id="chat" data-icon="custom">Chat</a></li>
				<li><a href="${cPath }/settings/setMain.mo" id="set" data-icon="custom">Settings</a></li>
			</ul>
		</div>
		
	</div>

	<div data-role="content" style="padding:0px;" data-theme="a">
		<div id="map_div" style="width:100%; height:100%"></div>

		<form name="resetForm" action="${cPath }/scan/scanMapReset.mo">
		<INPUT type="hidden" name="mem_no" value="${sessionScope.memberSession.mem_no }" />
		<div id="slider" style="left:10px; bottom:40px; width:70%; height:40px; z-index:9999;position:fixed;" >
			<input type="range" readonly="readonly" name="range" id="range" 
				value="${empty range?5:range }" min="1" max="10" step="1" data-mini="true"/>
		</div>
		<div style="right:10px; bottom:100px; z-index:9998; position:fixed;" >
			<fieldset data-role="controlgroup" data-mini="true">
		    	<input type="radio" name="mem_scaninfo" id="radio_friend" value="f"/>
				<label id="rad_friend" for="radio_friend">친구</label>

				<input type="radio" name="mem_scaninfo" id="radio_people" value="p"/>
				<label id="rad_people" for="radio_people">사람</label>

				<input type="radio" name="mem_scaninfo" id="radio_shop" value="s"/>
				<label id="rad_shop" for="radio_shop" >상점</label>    
		    </fieldset>
		</div>
		<div style="right:10px; bottom:40px; height:50px; z-index:10000;position:fixed;" >
			<a href="javascript:document.resetForm.submit();"><img src="${cPath }/css/images/re.png" border="0"></img> </a>
<!-- 			<input type="submit" value="Re"/> -->
		</div>
		</form>
		
	</div>

	<div id="footerId" data-role="footer" data-position="fixed" data-theme="a">		
		<div data-role="navbar">
			<ul>
				<li><a href="#" class="ui-btn-active" >Map</a></li>
				<li><a href="#" onclick="moveScanList();" >List</a></li>
			</ul>
		</div>
	</div>
	
</div><!-- /page -->
</body>
</html>